<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <span>span</span>
        <span>span</span>
        <span>span</span>
      </div>
      
      <button class="add">添加节点</button>
      <button class="del">删除节点</button>

      <script>
        const addButton = document.querySelector('.add')
        // 绑定事件
        addButton.addEventListener('click',function(){
            // 添加节点：创建a标签（在内存中）
            const a = document.createElement('a')

            // 设置内容
            a.innerHTML = '我细化你'
            a.href = 'https://www.baidu.com'

            // 找到body
            const body = document.querySelector('body')
            // 在body中调用append将a节点添加到body中
            // 末尾添加
            // body.append(a)
            // 开头添加
            body.prepend(a)
        })
        
        document.querySelector('.del').addEventListener('click',function() {
            // 删除节点：自己删自己
            // this.remove()

            // 删除指定标签
            // 找到对应的标签
            // document.querySelector('body').remove()
            // document.querySelectorAll('span').forEach(item=>{
            //     item.remove()
            // })

            // 每隔一秒钟删除一个
            document.querySelectorAll('span').forEach((item,index)=>{
                setTimeout(() => {
                    item.remove()
                }, (index+1)*1000);
            })
        })
      </script>
</body>
</html>